<template>
	<view>
		<detail-info :item="detail"></detail-info>
		<!-- 评论 -->
		<view class="u-comment-title">最新评论{{comment.count}}</view>

		<view class="uni-comment u-comment">
			<block v-for="(item,index) in comment.list" :key="index">
				<comment-list :item="item" :index="index"></comment-list>
			</block>
		</view>
		<view style="height: 120rpx;"></view>
		<!-- 输入框 -->
		<chat-bottom @submit="submit"></chat-bottom>

		<!-- 弹出层 发帖公告 -->
		<uni-popup id="popup" ref="popup" type="bottom">
			<view class="popup-content">
				<view class="flex-sc-ac">分享到</view>
				<view class="flex-sc-ac">
					<image src="../../static/common/share.png" mode="widthFix" lazy-load></image>
				</view>
				<button @tap="hiddenPop()" plain="">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import detailInfo from '../../components/detail/detail-info.vue'
	import commentList from '../../components/detail/comment-list.vue'
	import time from "../../common/time.js";
	export default {
		data() {
			return {
				comment: {
					count: 20,
					list: []
				},
				detail: {
					userpic: "../../static/demo/userpic/1.jpg",
					username: "哈哈",
					sex: 0, //0 男 1 女
					age: 25,
					isguanzhu: false,
					title: "我的产品",
					titlepic: "../../static/demo/datapic/13.jpg",
					morepic: ["../../static/demo/datapic/5.jpg", "../../static/demo/datapic/9.jpg"],
					video: false,
					share: false,
					path: "湖南 长沙",
					sharenum: 20,
					commentnum: 30,
					goodnum: 20
				},
			}
		},
		components: {
			detailInfo,
			commentList
		},
		onLoad(e) {
			this.initdata(JSON.parse(e.detailData));
			this.getcomment()
		},
		onNavigationBarButtonTap(e) {
			//监听原生导航右边事件
			if (e.index == 0) {
				// 点击分享
				this.togle();
			}
		},
		methods: {
			hiddenPop() {
				this.$refs.popup.close();
			},
			togle() {
				this.$refs.popup.open()
			},
			submit(data) {
				// 发布评论
				let obj = {
					id: 1,
					fid: 0,
					userpic: "../../static/demo/userpic/6.jpg",
					username: "yf",
					time: time.gettime.gettime(new Date().getTime()),
					data: data,
				}
				this.comment.list.push(obj)
			},
			initdata(obj) {
				//修改标题窗口
				uni.setNavigationBarTitle({
					title: obj.title
				})
			},
			getcomment() {
				//获取评论信息
				let arr = [
					// 一级评论
					{
						id: 1,
						fid: 0,
						userpic: "../../static/demo/userpic/3.jpg",
						username: "llx",
						time: "1555400035",
						data: "uni-app是个好东西",
					},
					// 子级评论
					{
						id: 2,
						fid: 1,
						userpic: "../../static/demo/userpic/10.jpg",
						username: "Jenny",
						time: "1555400035",
						data: "那是当然的",
					},
					{
						id: 3,
						fid: 1,
						userpic: "../../static/demo/userpic/5.jpg",
						username: "xxx",
						time: "1555400035",
						data: "肯定的",
					},
					{
						id: 4,
						fid: 0,
						userpic: "../../static/demo/userpic/8.jpg",
						username: "卤蛋",
						time: "1555400035",
						data: "uni-app怎么这么难啊",
					},
				]
				for (let i = 0; i < arr.length; i++) {
					arr[i].time = time.gettime.gettime(arr[i].time);
				}
				this.comment.list = arr;
			}
		}
	}
</script>

<style>
	.u-comment {
		padding: 0 20rpx;
	}

	.u-comment-title {
		padding: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.popup-content {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 10rpx;
	}
</style>
